.ada-hmr-controllbar {
  position: fixed;
  right: 10px;
  bottom: 10px;
  z-index: 999999999;
  cursor: default;
  .ada-hmr-controllbar-box {
    .ada-hmr-controllbar-logocon {
      width: 30px;
      height: 30px;
      position: relative;
    }
    .ada-hmr-controllbar-logo {
      width: 26px;
      height: 26px;
      color: #474f6f;
      position: absolute;
      top: 2px;
      left: 2px;
      z-index: 4;
    }
    .ada-hmr-controllbar-logo-circle {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 2;
      .ada-hmr-controllbar-logo-circle-loader {
        color: #b2b6ca;
        position: relative;
        width: 30px;
        height: 30px;
        box-shadow: inset 0 0 0 1em;
        transform: translateZ(0);
        border-radius: 50%;
        &:before,
        &:after {
          border-radius: 50%;
          position: absolute;
          content: "";
        }
        &:before {
          width: 15px;
          height: 30px;
          background: #474f6f;
          border-radius: 30px 0 0 30px;
          top: 0;
          left: 0;
          transform-origin: 15px 15px;
          animation: ada-hmr-controllbar-loader 2s infinite ease 1.5s;
        }
        &:after {
          width: 15px;
          height: 30px;
          background: #474f6f;
          border-radius: 0 30px 30px 0;
          top: 0;
          left: 14.7px;
          transform-origin: 0 15px;
          animation: ada-hmr-controllbar-loader 2s infinite ease;
        }
      }
    }
    .ada-hmr-controllbar-btns {
      position: absolute;
      left: 3px;
      top: 3px;
      text-align: center;
      display: none;
      background: #474f6f;
      border-radius: 12px;
      z-index: 10;
      .ada-hmr-controllbar-btn {
        width: 24px;
        height: 24px;
        text-align: center;
        font-size: 12px;
        color: white;
        line-height: 30px;
        transition: all ease-out 0.3s;
        .ada-hmr-controllbar-icon {
          display: inline-block;
          width: 1em;
          height: 1em;
          stroke-width: 0;
          stroke: currentColor;
          fill: currentColor;
        }
        &.ada-hmr-controllerbar-btn-play {
          display: none;
        }
        &.ada-hmr-controllerbar-btn-paus {
          display: inline-block;
        }
        &:hover {
          color: #e5e5e5;
        }
      }
    }
    &:hover {
      .ada-hmr-controllbar-btns {
        display: flex;
      }
    }
  }
  &.ada-hmr-controllbar-stop {
    .ada-hmr-controllbar-logo-circle {
      .ada-hmr-controllbar-logo-circle-loader {
        &:before,
        &:after {
          display: none;
        }
      }
    }
    .ada-hmr-controllbar-btns {
      .ada-hmr-controllbar-btn {
        &.ada-hmr-controllerbar-btn-play {
          display: inline-block;
        }
        &.ada-hmr-controllerbar-btn-paus {
          display: none;
        }
      }
    }
  }

  &.ada-hmr-controllbar-action {
    .ada-hmr-controllbar-box {
      .ada-hmr-controllbar-logo {
        color: #ffc66d;
      }
    }
  }

  @keyframes ada-hmr-controllbar-loader {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }

  @keyframes ada-hmr-controllbar-logo-rond {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  @keyframes ada-hmr-controllbar-logo-eyes {
    0% {
      top: 7px;
    }
    40% {
      top: 8px;
      left: 11px;
    }
    60% {
      top: 8px;
      left: 12px;
    }
    80% {
      top: 8px;
      left: 11px;
    }
    70% {
      top: 8px;
      left: 12px;
    }
    100% {
      top: 7px;
      left: 11px;
    }
  }
}
